import Menu from "../Menu";
import Button from "../Button";

const TopBar = () => {
    return (
        <div className="py-2 border-b-font-blue border-opacity-10 box-content border fixed top-0 left-0 right-0 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm z-50">
            <div className="container max-w-7xl mx-auto flex items-start justify-between px-6">
                <div className="flex items-center justify-between grow gap-4">
                    <img
                        className="h-11 shrink-0 hidden laptop:block"
                        src="/logo.svg"
                        alt="易剪云"
                    />
                    <Menu />
                </div>
                <div className="absolute top-2 right-6 laptop:relative laptop:right-0 flex gap-2 items-center">
                    <Button className="hidden laptop:block">预约演示</Button>
                    <Button size="small" className="laptop:hidden">
                        <img src="/header/icon-preview.svg" alt="" />
                    </Button>
                    <Button className="hidden laptop:block">用户登录</Button>
                    <Button size="small" className="laptop:hidden">
                        <img src="/header/icon-login.svg" alt="" />
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default TopBar;
